<script setup>
import { ref } from 'vue'

const tabs = [
  { id: 'home', label: '首页', content: '这是首页内容。' },
  { id: 'about', label: '关于', content: '这是关于页面。' },
  { id: 'contact', label: '联系', content: '这是联系页面。' },
]

const currentTab = ref('home')

function selectTab(tabId) {
  currentTab.value = tabId
}
</script>
<template>
  <div class="tabs-container">
    <div class="tabs-header">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        :class="{ active: currentTab === tab.id }"
        @click="selectTab(tab.id)"
      >
        {{ tab.label }}
      </button>
    </div>

    <div class="tabs-body">
      <div v-for="tab in tabs" :key="tab.id" v-show="currentTab === tab.id" class="tab-content">
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>
<style scoped>
.tabs-container {
  max-width: 500px;
  margin: 0 auto;
  font-family: sans-serif;
}

.tabs-header {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.tabs-header button {
  padding: 10px 15px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.tabs-header button.active {
  border-bottom: 2px solid #42b983;
  color: #42b983;
}

.tab-content {
  padding: 20px;
  line-height: 1.6;
}
</style>
